<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAllDataStore } from '../stores'

const store = useAllDataStore()
// 标签数据
const tags = computed(() => store.state.tags)
const route = useRoute()
const router = useRouter()

const handleMenu = (tag) => {
  router.push(tag.name)
  store.selectMenu(tag)
}
const handleClose = (tag, index) => {
  store.updateTags(tag)
  // if (tag.name !== route.name) return
  // 如果关闭的是当前页面
  if (tag.name === route.name) {
    // 如果点击关闭的是最后一个tag，那么跳转到前一个tag的页面
    if (index === store.state.tags.length) {
      store.selectMenu(tags.value[index-1])
      router.push(tags.value[index-1].name)
    } else {
      // 如果点击关闭的不是最后一个tag，那么跳转到当前tag索引页
      store.selectMenu(tags.value[index])
      router.push(tags.value[index].name)
    }
  }
}
</script>

<template>
  <div class="tags">
    <el-tag
      v-for="(tag, index) in tags"
      :key="tag.name"
      :closable="tag.name!=='home'"
      :effect="route.name===tag.name?'dark':'plain'"
      @click="handleMenu(tag)"
      @close="handleClose(tag, index)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<style lang="less" scoped>
.tags {
  margin: 20px 0 0 20px;
  .el-tag {
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>